<template>
  <div class="v-dialog">
    <div class="v-d-mask"></div>
    <div class="v-d-box">
      <div class="v-d-title">活动规则<span v-tap="{methods:dialogClose}"></span></div>
      <div class="v-d-body" id="iscrollBox">
        <div id="scroll">
          <ul>
            <li v-for="item in data">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less">
  .v-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 8000;
    .v-d-mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
    }
    .v-d-box {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 600px;
      height: 500px;
      background: #fff;
      margin: auto;
      z-index: 2000;
    }
    .v-d-title {
      position: relative;
      height: 80px;
      line-height: 85px;
      text-align: center;
      font-size: 36px;
      span{
        position: absolute;
        right: 30px;
        top: 15px;
        width: 45px;
        height: 45px;
        background: #000000;
        cursor: pointer;

      }
    }

    .v-d-body {
      position: relative;
      top: 0;
      left: 0;
      bottom: 30px;
      right: 0;
      width: 100%;
      height: 390px;
      overflow: hidden;
      background: #fff;


      #scroll {
        position: absolute;
        z-index: 1;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        width: 100%;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
        overflow: hidden;
        ul {
          width: 100%;

          text-align: left;
          box-sizing: border-box;
          padding: 20px 50px;
          li {
            font-size: 24px;
            line-height: 30px;
            margin-bottom: 15px;
            padding: 0 10px;
            text-align: justify;
          }
        }
      }
    }

  }
</style>
<script>
  var IScroll = require('@/public/libs/iscroll-lite');
  export default{
    props: ["data"],
    mounted(){
      //定义滚动条函数

      window.myScroll = new IScroll('#iscrollBox', {
        mouseWheel: true
      });

      window.stopTouchMove = function (e) {
        e.preventDefault();
      };

      document.addEventListener('touchmove', window.stopTouchMove, false);
    },
    methods: {
      dialogClose(){
        document.removeEventListener('touchmove', window.stopTouchMove, false);
        this.$parent.dialogFlag = false;
      }
    }
  }
</script>
